<template>
  <div>
    <template>

    <el-form :inline="true" :model="searchBean" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="searchBean.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getReceList()">查询</el-button>
        <el-button type="primary" @click="addFlag = true">添加</el-button>
      </el-form-item>
    </el-form>

        <el-dialog title="客户信息" :visible.sync="addFlag">
          <el-form :model="addBean">
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="addBean.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth">
              <el-input v-model="addBean.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="发货单位" :label-width="formLabelWidth">
              <el-input v-model="addBean.jobname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="提货地址" :label-width="formLabelWidth">
              <el-input v-model="addBean.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户余额" :label-width="formLabelWidth">
              <el-input v-model="addBean.sumprice" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份" :label-width="formLabelWidth">
              <el-input v-model="addBean.identity" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addFlag = false">取 消</el-button>
            <el-button type="primary" @click="addRece">确 定</el-button>
          </div>
        </el-dialog>


        <el-dialog title="客户信息" :visible.sync="updFlag">
          <el-form :model="updBean">
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="updBean.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth">
              <el-input v-model="updBean.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="发货单位" :label-width="formLabelWidth">
              <el-input v-model="updBean.jobname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="提货地址" :label-width="formLabelWidth">
              <el-input v-model="updBean.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户余额" :label-width="formLabelWidth">
              <el-input v-model="updBean.sumprice" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份" :label-width="formLabelWidth">
              <el-input v-model="updBean.identity" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="updFlag = false">取 消</el-button>
            <el-button type="primary" @click="updRece">确 定</el-button>
          </div>
        </el-dialog>

      <el-table :data="receList" style="width: 100%">
        <el-table-column label="id" prop="id" width="180"></el-table-column>
        <el-table-column label="姓名" prop="name" width="180"></el-table-column>
        <el-table-column label="手机号" prop="phone" width="180"></el-table-column>
        <el-table-column label="发货单位" prop="jobname" width="180"></el-table-column>
        <el-table-column label="提货地址" prop="address" width="180"></el-table-column>
        <el-table-column label="用户余额" prop="sumprice" width="180"></el-table-column>
        <el-table-column label="身份" prop="identity" width="180"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="upd(scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="delRece(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
</template>

  </div>
</template>


<script>
export default {
  data() {
    return {
      receList:[],
      pagination:{},
      searchBean:{},
      addFlag:false,
      addBean:{},
      updFlag:false,
      updBean:{},
      formLabelWidth:"120px"
    };
  },
  mounted(){
    this.getReceList()
  },
  methods:{
    upd:function(row){
        this.updBean=row
        this.updFlag=true
    },
    updRece:function(){
      var $this = this;
      this.axios({
        method: "get",
        url: "http://localhost:9999/transport/tmsRece/updRece?access_token="+localStorage.getItem("access_token"),
        params:{
          id:this.updBean.id,
          name:this.updBean.name,
          phone:this.updBean.phone,
          jobname:this.updBean.jobname,
          address:this.updBean.address,
          identity:this.updBean.identity,
          sumprice:this.updBean.sumprice
        }
      }).then(function(res) {
        console.log("{}", res);
        if (res.data.code == 200) {
          window.console.log("res{}",res)
          $this.getReceList();
          $this.updFlag=false
        }
      });
    },
    getReceList() {
      window.console.log(this.SearchBean)
      var $this = this;
      this.axios({
        method: "get",
        url: "http://localhost:9999/transport/tmsRece/receList?access_token="+localStorage.getItem("access_token"),
        params:{
          name:this.searchBean.name
        }
      }).then(function(res) {
        console.log("{}", res);
        if (res.data.code == 200) {
          window.console.log("res{}",res)
          $this.receList=res.data.obj.list
          $this.pagination=res.data.obj
          window.console.log("receList{}",$this.receList)
        }
      });
    },
    addRece:function(){
      var $this = this;
      this.axios({
        method: "get",
        url: "http://localhost:9999/transport/tmsRece/addRece?access_token="+localStorage.getItem("access_token"),
        params:{
          name:this.addBean.name,
          phone:this.addBean.phone,
          jobname:this.addBean.jobname,
          address:this.addBean.address,
          identity:this.addBean.identity,
          sumprice:this.addBean.sumprice
        }
      }).then(function(res) {
        console.log("{}", res);
        if (res.data.code == 200) {
          window.console.log("res{}",res)
          $this.getReceList();
          $this.addFlag=false
        }
      });
    },
    delRece:function(row){
      var id = row.id
      var $this = this;
      this.axios({
        method: "get",
        url: "http://localhost:9999/transport/tmsRece/delRece?access_token="+localStorage.getItem("access_token"),
        params:{
          id:id
        }
      }).then(function(res) {
        console.log("{}", res);
        if (res.data.code == 200) {
          window.console.log("res{}",res)
          $this.getReceList();
        }
      });
    }
  }
};
</script>